<template>
  <div class="singermv">
    <div class="mv-box">
      <div
        class="mv-item"
        v-for="(item, index) in mvs"
        :key="index"
        @click="toMvDetails(item.id)"
      >
        <div class="image">
          <img :src="item.imgurl16v9" :alt="item.name" :title="item.name" />
          <div class="tooltip">
            <i class="iconfont icon-luxiang"></i>
            {{ item.playCount }}
          </div>
          <!-- <div class="mask"></div> -->
          <i class="iconfont icon-bofang4" :style="{ color: themeColor }"></i>
        </div>
        <p class="name" @click="toMvDetails(item.id)">{{ item.name }}</p>
        <p class="date">{{ item.publishTime }}</p>
      </div>
    </div>
    <el-pagination
      v-if="totalMv !== 0"
      background
      layout="prev, pager, next, jumper,total"
      :total="totalMv"
      :current-page="page"
      :page-size="limit"
      @current-change="currentChange"
    >
    </el-pagination>
    <div v-else-if="totalMv === 0" class="nomv">
      <h2><i class="iconfont icon-ermai"></i>暂无MV</h2>
    </div>
  </div>
</template>

<script>
import { getArtistMv } from "@/api/singer.js";
export default {
  name: "SingerMv",
  components: {},
  props: {
    totalMv: {
      type: Number
    }
  },
  data() {
    return {
      mvs: "", //mv
      page: 1,
      limit: 20
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.themeColor;
    }
  },
  watch: {
    $route() {
      this.mvs = [];
      this.getArtistMv();
    }
  },
  created() {
    this.getArtistMv();
  },
  mounted() {},
  methods: {
    async getArtistMv() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0)",
        customClass: "customClass"
      });
      const { data } = await getArtistMv({
        id: this.$route.query.id,
        limit: this.limit,
        offset: (this.page - 1) * this.limit
      });
      if (data.code === 200) {
        loading.close();
      }
      this.mvs = data.mvs;
      this.mvs.forEach(value => {
        if (value.playCount >= 10000) {
          value.playCount = parseInt(value.playCount / 10000) + "万";
        }
      });
    },
    currentChange(page) {
      this.page = page;
      this.getArtistMv();
      document.querySelector(".el-main").scrollTop = 0;
    },
    toMvDetails(id) {
      this.$router.push({
        name: "mvdetails",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.singermv {
  position: relative;
  height: 100%;
  .mv-box {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0.625rem;
    .mv-item {
      width: 20%;
      padding: 0.625rem 0.9375rem;
      box-sizing: border-box;
      .image {
        position: relative;
        width: 100%;
        height: 10rem;
        cursor: pointer;
        border-radius: 0.3125rem;
        img {
          width: 100%;
          border-radius: 0.3125rem;
          height: 100%;
        }
        .icon-bofang4 {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 2.25rem;
          color: #fff;
          opacity: 0;
          transition: all 0.5s;
        }
        .tooltip {
          border-radius: 0.3125rem;
          box-sizing: border-box;
          position: absolute;
          // border-radius: 0.625rem;
          top: 0;
          left: 0;
          width: 100%;
          background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4));
          height: 1.875rem;
          z-index: 2;
          text-align: right;
          line-height: 1.875rem;
          color: #fff;
          padding: 0 0.625rem;

          // transition: all 0.6s;
          .icon-luxiang {
            font-size: 1.25rem;
          }
        }
      }
      .image:hover .icon-bofang4 {
        opacity: 1;
      }
      .name {
        font-size: 0.875rem;
        padding-bottom: 0.3125rem;
        cursor: pointer;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      .name:hover {
        text-decoration: underline;
      }
      .date {
        font-size: 0.75rem;
        color: #666;
      }
    }
  }
  .nomv {
    height: 3.125rem;
    //   position: absolute;
    line-height: 3.125rem;
    bottom: 0;
    text-align: center;
    padding: 8.125rem 0;
    font-size: 1.625rem;
    color: #666;
    //   left: 0;
    //   margin:  0 auto;
    .icon-ermai {
      font-size: 1.75rem;
    }
  }
}

.el-pagination {
  margin-bottom: 6.25rem;
}
</style>
